<script setup>
import {FButton, FForm, FFormItem, FInput, FSelect, FSpace} from '@fesjs/fes-design'
import {ref} from "vue";

defineProps({
  subActionList: [],
  currentSelectSubActionParamList: []
})
const token = defineModel("token")
const selectSubActionValue = defineModel("selectSubActionValue")
const emit = defineEmits(['selectSubAction','execute','addToExecuteTextbox','resetHandler'])


function selectChange(index) {
  emit('selectSubAction', index)
}
function submitHandler(){
  emit('execute')

}
function addToExecuteTextbox(){
  emit('addToExecuteTextbox')
}
function  resetHandler(){
  emit('resetHandler')
}


</script>

<template>
  <FSelect
      v-model="selectSubActionValue"
      filterable
      valueField="index"
      labelField="item"
      style="width: 200px"
      @change="selectChange"
      :options="subActionList"
  />
  <FForm labelPosition="top">
    <FFormItem label="Token">
      <FInput placeholder="Token" v-model="token"></FInput>
    </FFormItem>
    <template v-for="(item, index) in currentSelectSubActionParamList">
      <FFormItem :label="item.title">
        <FInput :placeholder="item.title" v-if="item.values == null" v-model="item.value"/>
        <FInput :placeholder="item.title"
                v-if="item.values && item.values.length===1"
                v-model="item.value"/>
        <FSelect placeholder="请选择"
                 v-if="item.values && item.values.length > 1"
                 valueField="value"
                 labelField="title"
                 :options="item.values" v-model="item.value" clearable/>
      </FFormItem>
    </template>

    <FFormItem label=" ">
      <FSpace>
        <FButton type="primary" @click="addToExecuteTextbox">添加到执行框</FButton>
      </FSpace>
    </FFormItem>
  </FForm>

</template>

<style scoped>

</style>